﻿@using Digital.WCFClient.ConfigService
@using System.Collections.ObjectModel
@using Digital.Common.Mvc.Extensions
@using Digital.Web.Controllers
@using Microsoft.AspNet.Identity
@model Digital.WCFClient.ConfigService.FileFolderMode
@{
    ViewBag.Title = "文件综合管理";
    Layout = "~/Views/Shared/_LayoutDigital.cshtml";
}
@section PageSpecificJavascriptIncludes{
    <link rel="stylesheet" href="../DigitalStyle/css/jquery.gritter.css" />
    <link rel="stylesheet" href="../DigitalStyle/css/prettyPhoto.css" />

    <script src="../DigitalStyle/js/jquery.gritter.min.js"></script>
    <script src="../DigitalStyle/js/jquery.validate.min.js"></script>
    <script src="../DigitalStyle/js/JqueryToken.js"></script>
    <script src="../DigitalStyle/js/messages_cn.js"></script>
    <script src="../DigitalStyle/js/jquery.prettyPhoto.js"></script>
}
<div class="pageheader">
    <h2><i class="fa fa-user"></i> 企业文件柜 <span>文件综合管理</span></h2>
    <div class="breadcrumb-wrapper">
        <span class="label">你的位置:</span>
        <ol class="breadcrumb">
            <li><a href="">企业中心</a></li>
            <li class="active">企业文件柜</li>
        </ol>
    </div>
</div>


<div class="contentpanel">
    <div class="row">

        <ul class="filemanager-options">
            <li>
                <div class="ckbox ckbox-default">
                    <input type="checkbox" id="selectall" value="1" />
                    <label for="selectall">全选</label>
                </div>
            </li>

            @*<li>
                <a href="#" onclick="javascript:FilesOperationByFolders(0);" class="itemopt disabled"><i class="fa fa-download"></i> 下载</a>
            </li>*@
            @*<li>
                    <a href="" class="itemopt disabled"><i class="fa fa-pencil"></i> 编辑</a>
                </li>*@
            <li>
                <a href="" onclick="javascript:FilesOperationByFolders(1);" class="itemopt disabled"><i class="fa fa-trash-o"></i> 删除</a>
            </li>

            @*<li class="filter-type">
                    选择显示类型:
                    <a href="all" class="active">全选</a>
                    <a href="document">文档</a>
                    <a href="audio">音频</a>
                    <a href="image">图片</a>
                    <a href="video">视频</a>
                </li>*@

        </ul>


        <div class="row">
            <div class="col-sm-9">
                <div id="FileManager" class="row filemanager">

                </div><!-- row -->
            </div><!-- col-sm-9 -->
            <div class="col-sm-3">
                <div class="fm-sidebar">
                    <button class="btn btn-primary btn-block" onclick="javascript:window.location='/Company/CompanyPictureUpload';">Upload Files</button>
                    <div class="mb30"></div>
                    <h5 class="subtitle">文件分类 <a href="" data-toggle="modal" data-target=".bs-example-modal-lg" class="pull-right">+ 添加分类</a></h5>
                    <ul id="FolderList" class="folder-list"></ul>

                    <div class="mb30"></div>
                </div>
            </div><!-- col-sm-3 -->
        </div>
    </div>

</div><!-- mainpanel -->

<div class="rightpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#rp-alluser" data-toggle="tab"><i class="fa fa-users"></i></a></li>
        <li><a href="#rp-favorites" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
        <li><a href="#rp-history" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
        <li><a href="#rp-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="rp-alluser">
            <h5 class="sidebartitle">Online Users</h5>
            <ul class="chatuserlist">
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/userprofile.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Eileen Sideways</strong>
                            <small>Los Angeles, CA</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user1.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <span class="pull-right badge badge-danger">2</span>
                            <strong>Zaham Sindilmaca</strong>
                            <small>San Francisco, CA</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user2.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Nusja Nawancali</strong>
                            <small>Bangkok, Thailand</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user3.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Renov Leongal</strong>
                            <small>Cebu City, Philippines</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user4.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Weno Carasbong</strong>
                            <small>Tokyo, Japan</small>
                        </div>
                    </div><!-- media -->
                </li>
            </ul>

            <div class="mb30"></div>

            <h5 class="sidebartitle">Offline Users</h5>
            <ul class="chatuserlist">
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user5.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Eileen Sideways</strong>
                            <small>Los Angeles, CA</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user2.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Zaham Sindilmaca</strong>
                            <small>San Francisco, CA</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user3.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Nusja Nawancali</strong>
                            <small>Bangkok, Thailand</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user4.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Renov Leongal</strong>
                            <small>Cebu City, Philippines</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user5.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Weno Carasbong</strong>
                            <small>Tokyo, Japan</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user4.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Renov Leongal</strong>
                            <small>Cebu City, Philippines</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user5.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Weno Carasbong</strong>
                            <small>Tokyo, Japan</small>
                        </div>
                    </div><!-- media -->
                </li>
            </ul>
        </div>
        <div class="tab-pane" id="rp-favorites">
            <h5 class="sidebartitle">Favorites</h5>
            <ul class="chatuserlist">
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user2.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Eileen Sideways</strong>
                            <small>Los Angeles, CA</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user1.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Zaham Sindilmaca</strong>
                            <small>San Francisco, CA</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user3.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Nusja Nawancali</strong>
                            <small>Bangkok, Thailand</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user4.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Renov Leongal</strong>
                            <small>Cebu City, Philippines</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user5.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Weno Carasbong</strong>
                            <small>Tokyo, Japan</small>
                        </div>
                    </div><!-- media -->
                </li>
            </ul>
        </div>
        <div class="tab-pane" id="rp-history">
            <h5 class="sidebartitle">History</h5>
            <ul class="chatuserlist">
                <li class="online">
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user4.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Eileen Sideways</strong>
                            <small>Hi hello, ctc?... would you mind if I go to your...</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user2.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Zaham Sindilmaca</strong>
                            <small>This is to inform you that your product that we...</small>
                        </div>
                    </div><!-- media -->
                </li>
                <li>
                    <div class="media">
                        <a href="#" class="pull-left media-thumb">
                            <img alt="" src="../DigitalStyle/images/photos/user3.png" class="media-object">
                        </a>
                        <div class="media-body">
                            <strong>Nusja Nawancali</strong>
                            <small>Are you willing to have a long term relat...</small>
                        </div>
                    </div><!-- media -->
                </li>
            </ul>
        </div>
        <div class="tab-pane pane-settings" id="rp-settings">

            <h5 class="sidebartitle mb20">Settings</h5>
            <div class="form-group">
                <label class="col-xs-8 control-label">Show Offline Users</label>
                <div class="col-xs-4 control-label">
                    <div class="toggle toggle-success"></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-8 control-label">Enable History</label>
                <div class="col-xs-4 control-label">
                    <div class="toggle toggle-success"></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-8 control-label">Show Full Name</label>
                <div class="col-xs-4 control-label">
                    <div class="toggle-chat1 toggle-success"></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-8 control-label">Show Location</label>
                <div class="col-xs-4 control-label">
                    <div class="toggle toggle-success"></div>
                </div>
            </div>

        </div><!-- tab-pane -->

    </div><!-- tab-content -->
</div><!-- rightpanel -->

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 class="modal-title">文件分类</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-bordered" id="firstForm" onsubmit="return false">
                    @Html.AntiForgeryToken()

                    <div class="form-group">
                        <label class="col-sm-3 control-label"><span class="asterisk">*</span> 分类名称</label>
                        <div class="col-sm-6">
                            <input id="FolderName" type="text" placeholder="分类名称..." class="form-control" required/>
                        </div>
                    </div>

                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                                <button class="btn btn-primary" onclick="javascript:Save();">提交</button>&nbsp;
                                @*<button class="btn btn-default" >取消</button>*@
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div id="DivFile" class="col-xs-6 col-sm-4 col-md-3 document" style="display:none">
    <div class="thmb">
        <input type="hidden" id="folder{index}" value="{FolderName}" />
        <input type="hidden" id="file{index}" value="{FileName}" />
        <div class="ckbox ckbox-default">
            <input type="checkbox" id="check{index}" value="{index}" />
            <label for="check{index}"></label>
        </div>
        <div class="btn-group fm-group">
            <button type="button" class="btn btn-default dropdown-toggle fm-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu fm-menu" role="menu">
                <li><a href="~/FileDownload.ashx?folderName={FolderName}&fileName={FileName}" target="_self"><i class="fa fa-download"></i> Download</a></li>
                <li><a href="#" onclick="javascript:FileDeleteByFolder('{FolderName}','{FileName}');"><i class="fa fa-trash-o"></i> Delete</a></li>
            </ul>
        </div><!-- btn-group -->
        <div class="thmb-prev">
            <img src="../Upload/{FilePath}" class="img-responsive" alt="" />
        </div>
        <h5 class="fm-title"><a href="">{FileName}</a></h5>
        <small class="text-muted">Added: {FileDate}</small>
    </div><!-- thmb -->
</div><!-- col-xs-6 -->

<script>
    jQuery(document).ready(function () {
        //UI LI LIST : File Folders
        var Folderjsons=@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject((List<FileFolderMode>)ViewBag.DirectoryList))
        UILIHtml(Folderjsons,$("#FolderList"));

        FilesList();

        jQuery('.thmb').hover(function () {
            var t = jQuery(this);
            t.find('.ckbox').show();
            t.find('.fm-group').show();
        }, function () {
            var t = jQuery(this);
            if (!t.closest('.thmb').hasClass('checked')) {
                t.find('.ckbox').hide();
                t.find('.fm-group').hide();
            }
        });

        jQuery('.ckbox').each(function () {
            var t = jQuery(this);
            var parent = t.parent();
            if (t.find('input').is(':checked')) {
                t.show();
                parent.find('.fm-group').show();
                parent.addClass('checked');
            }
        });


        jQuery('.ckbox').click(function () {
            var t = jQuery(this);
            if (!t.find('input').is(':checked')) {
                t.closest('.thmb').removeClass('checked');
                enable_itemopt(false);
            } else {
                t.closest('.thmb').addClass('checked');
                enable_itemopt(true);
            }
        });

        jQuery('#selectall').click(function () {
            if (jQuery(this).is(':checked')) {
                jQuery('.thmb').each(function () {
                    jQuery(this).find('input').attr('checked', true);
                    jQuery(this).addClass('checked');
                    jQuery(this).find('.ckbox, .fm-group').show();
                });
                enable_itemopt(true);
            } else {
                jQuery('.thmb').each(function () {
                    jQuery(this).find('input').attr('checked', false);
                    jQuery(this).removeClass('checked');
                    jQuery(this).find('.ckbox, .fm-group').hide();
                });
                enable_itemopt(false);
            }
        });

        function enable_itemopt(enable) {
            if (enable) {
                jQuery('.itemopt').removeClass('disabled');
            } else {

                // check all thumbs if no remaining checks
                // before we can disabled the options
                var ch = false;
                jQuery('.thmb').each(function () {
                    if (jQuery(this).hasClass('checked'))
                        ch = true;
                });

                if (!ch)
                    jQuery('.itemopt').addClass('disabled');
            }
        }

        //Replaces data-rel attribute to rel.
        //We use data-rel because of w3c validation issue
        jQuery('a[data-rel]').each(function () {
            jQuery(this).attr('rel', jQuery(this).data('rel'));
        });

        jQuery("a[rel^='prettyPhoto']").prettyPhoto();

        // With Form Validation Wizard
        var $validator = jQuery("#firstForm").validate({
            highlight: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-error');
            }
        });
    });

    function callBack() {
        window.location =window.location;
    }

    function Save()
    {
        var $valid = jQuery('#firstForm').valid();
        if (!$valid) {
            return false;
        }
        else {

            var valFolderName = $.jsparams.input("FolderName");
            var datas = {UserId:@User.Identity.GetUserId(),FolderName:valFolderName};
            ComAjax("/Company/CompanyFilesFolderSave", datas, "文件分类", "callBack");

        }
    }

    function FilesList()
    {
        ComAjaxJson("/Company/CompanyFilesList", {},FilesDisplay);
    }

    function FileListByFolder(folderName)
    {
        var datas={FolderName:folderName};
        ComAjaxJson("/Company/CompanyFilesByFolder", datas,FilesDisplay);
    }
    function FilesDisplay(filesJson)
    {
        var obj = eval(filesJson);
        var divParent=$("#FileManager");
        //find divParent.FileManager all child elements,and then remove it
        $("#FileManager > div[id*='DivFile']").each(function (index,element){
            var divId=$(this).attr("id");
            if (divId!="DivFile") {
                $(this).remove();
            }
        });

        //append files div container to divParent.FileManger
        $(obj).each(function (index) {
            var fileMode = obj[index];
            var divFileObj=$("#DivFile").clone();
            //alert(divFileObj.html());

            var reFileName=new RegExp("{FileName}","g");
            var reFolderName=new RegExp("{FolderName}","g");
            var reIndex=new RegExp("{index}","g");
            var filePath='UserInfo' + '@Digital.Common.CryptoService.MD5Encrypt(User.Identity.GetUserId(),Digital.Common.SerurityType.UserInfoFolder)'+'/'+fileMode.FolderParent+'/'+fileMode.FolderNameCode+'/'+fileMode.FileName;

            var divFile=divFileObj.attr("style","block").html().replace(reFileName,fileMode.FileName)
                .replace(reFolderName,fileMode.FolderParent)
                .replace("{FileDate}",fileMode.FileDate)
                .replace("{FilePath}",filePath)
                .replace(reIndex,index);
            divParent.append("<div id=\"DivFile"+index+"\" class=\"col-xs-6 col-sm-4 col-md-3 document\">"+divFile+"</div>");
        });
    }

    function FileDeleteByFolder(folderName,fileName)
    {
        var datas={FolderName:folderName,FileName:fileName};
        ComAjax("/Company/CompanyFileDeleteByFolder",datas,"企业文件","callBack");
    }

    function callBack() 
    {
        window.location = "/Company/CompanyFiles";
    }

    //for selectAll files remove
    function FilesOperationByFolders(isRemove)
    {
        var FolderFiles='';
        var FoldersList=new Array();
        var FilesList=new Array();

        jQuery('.ckbox').each(function (index) {
            var t = jQuery(this);
            if (t.find('input').attr('id') != "selectall") {
                if (t.find('input').is(':checked')) {
                    index=index-1;
                    var valInput=t.find('input').val();
                    if (valInput!='{index}') {
                        var valFolderName=$.jsparams.input("folder"+index);
                        var valFileName=$.jsparams.input("file"+index);
                        //FolderFiles+=valFolderName+","+valFileName+"&";
                        FoldersList.push(valFolderName);
                        FilesList.push(valFileName);
                    }
                }
            }
        });
        
        if (isRemove==1) {
            FileAllDeleteByFolder(FoldersList,FilesList);
        }else {
            // request to FileDownload.ashx
            FileAllDownloadByFolder(FoldersList,FilesList);
        }

    }

    function FileAllDeleteByFolder(folderName,fileName)
    {
        var datas={FolderNames:folderName.toString(),FileNames:fileName.toString()};
        ComAjax("/Company/CompanyFileAllDeleteByFolder",datas,"企业文件","callBack");
    }

    function FileAllDownloadByFolder(folderName,fileName)
    {
        var datas={FolderNames:folderName.toString(),FileNames:fileName.toString()};
        ComAjax("/Company/CompanyFileAllDownloadByFolder", datas, "企业文件",null);
    }

</script>



